<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left">
				<navigator url="../userhome/userhome?id=aaa" hover-class="none">
					<image src="../../static/images/img/1.jpg" ></image>
				</navigator>
			</view>
			<view class="top-bar-center">
				<image src="../../static/images/index/火.png" mode=""></image>
			</view>
			<view class="top-bar-right">
				<view class="search" @tap="toSearch()">
					<image src="../../static/images/index/search.png" mode=""></image>
				</view>
				<view class="add">
					<image src="../../static/images/index/add.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="apply"></view>
			<view class="friends">
				<view class="friend-list">
					<view class="friend-list-l">
						<text class="tip">15</text>
						<image src="../../static/images/index/apply.png" mode=""></image>
					</view>
					<view class="friend-list-r">
						<view class="top">
							<view class="name">
								好友申请
							</view>
							<view class="time">
								15:28
							</view>
						</view>
						<view class="news">
							茫茫人海，每一次相遇都是最好的安排！
						</view>
					</view>
				</view>
			</view>
			<view class="friends">
				<view class="friend-list" v-for="(item,index) in friends" :key='index'>
					<view class="friend-list-l">
						<text class="tip" v-if="item.tip>0">{{item.tip}}</text>
						<image :src="item.img" mode=""></image>
					</view>
					<view class="friend-list-r">
						<view class="top">
							<view class="name">
								{{item.name}}
							</view>
							<view class="time">
								{{item.time}}
							</view>
						</view>
						<view class="news">
							{{item.news}}
						</view>
					</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	import datas from '../../commons/js/datas.js'
	import myfunction from '../../commons/js/myfunction.js'
	export default {
		data() {
			return {
				friends:[]
			}
		},
		onLoad() {
			this.getFriends();
		},
		methods: {
			// 修改时间
			changeTime:function(date){
				return myfunction.dateTime(date);
			},
			//获取好友列表
			getFriends:function(){
				this.friends=datas.friend();
				this.friends.forEach((item,index)=>{
					item.img = "../../static/images/img/"+item.imgurl;
					item.time = this.changeTime(item.time);
				})
				//console.log(this.friends);
			},
			
			//跳转到注册页面
			toSearch: function(){
				uni.navigateTo({
					url: '../search/search'
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";
	.top-bar{
		background: rgba($color: #fff, $alpha: 0.96);
		border-bottom: 1px solid $uni-border-color;
	}
	.main{
		width: 100%;
		box-sizing: border-box;
		padding: 104rpx 0 ;
	}
	.friend-list{
		padding: 16rpx $uni-spacing-col-base 16rpx $uni-spacing-col-base;
		height: 96rpx;
		&:active{
			background-color: $uni-bg-color-grey;
		}
		.friend-list-l{
			position: relative;
			float: left;
			image{
				background-color: $uni-color-primary;
				width: 96rpx;
				height: 96rpx;
				border-radius: $uni-border-radius-base;
			}
			.tip{
				z-index: 10;
				position: absolute;
				padding: 0 6rpx;
				top: -8rpx;
				left: 68rpx;
				min-width: 24rpx;
				height: 36rpx;
				background: $uni-color-warning;
				border-radius: 18rpx;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-inverse;
				line-height: 36rpx;
				text-align: center;
			}
		}
		.friend-list-r{
			padding-left: 128rpx;
			.top{
				height: 50rpx;
				.name{
					float: left;
					font-size: 36rpx;
					font-weight: 400;
					color: $uni-text-color;
					line-height: 50rpx;
				}
				.time{
					float: right;
					font-size: $uni-font-size-sm;
					color: $uni-text-color-disable;
					line-height: 50rpx;
				}
			}
			.news{
				font-size: $uni-font-size-base;
				color: $uni-text-color-grey;
				line-height: 40rpx;
				display: -webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:1;
				overflow: hidden;
			}
		}
	}

</style>
